<template>
	<!--新增对话框-->
	<el-dialog
		:title="editForm.id ? '编辑' : '新增'"
		:visible.sync="dialogVisible"
		width="600px"
		:before-close="handleClose"
		:destroy-on-close="true"
	>
		<el-form :model="editForm" :rules="editFormRules" ref="editForm">
			<div v-if="!(editForm.id) || !isEditPs">
				<el-form-item label="用户名" prop="user_name" label-width="100px">
					<el-input v-model="editForm.user_name" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="手机号码" prop="call_no" label-width="100px">
					<el-input v-model="editForm.call_no" autocomplete="off" maxlength="11"></el-input>
				</el-form-item>
			</div>
			<div v-show="!(editForm.id) || isEditPs">
				<el-form-item label="密码" prop="password" label-width="100px">
					<el-input v-model="editForm.password" autocomplete="off" show-password></el-input>
				</el-form-item>
				<el-form-item label="确认密码" prop="repassword" label-width="100px">
					<el-input v-model="editForm.repassword" autocomplete="off" show-password></el-input>
				</el-form-item>
			</div>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="resetForm('editForm')">取 消</el-button>
			<el-button type="primary" @click="submitForm('editForm')">确 定</el-button>
		</div>
	</el-dialog>
</template>

<script>
import {formatServerDate} from '@/utils/date';
import { isNumber } from '@/utils/validate';
export default {
	name: 'AddUpdateShare',
	components: {
	},
	data() {
		return {
			editForm: {},
			loading: false,
			dialogVisible: false,
			isEditPs: false,
		};
	},
	mounted() {
		// this.getFarmList('');
	},
	computed: {
		editFormRules(){
			return {
				call_no: [
					{ required: true, message: '请输入手机号码', trigger: 'blur' },
					{ min: 11, max: 11, message: '手机号码为11位', trigger: 'blur' }
				],
				user_name: [
					{ required: true, message: '请输入用户名', trigger: 'blur' },
					{ min: 2, message: '最少2个字符', trigger: 'blur' }
				],
				password: [
					{ required: !(this.editForm.id), message: '请输入密码', trigger: 'blur' },
					{ min: 6, message: '最少6个字符', trigger: 'blur' }
				],
				repassword: [
					{ required: !(this.editForm.id), message: '请再次输入密码', trigger: 'blur' },
					{ min: 6, message: '最少6个字符', trigger: 'blur' }
				],
			}
		}
	},

	methods: {
		resetForm(formName) {
			this.$refs[formName].resetFields();
			this.dialogVisible = false;
			this.editForm = {};
		},
		handleClose() {
			this.resetForm('editForm');
		},
		submitForm(formName) {
			console.log(formName);
			this.$refs[formName].validate((valid) => {
				if (valid) {

                    const {password, repassword, user_name, call_no,...rest} = this.editForm;

					if(password !== repassword){

						this.$message('两次输入的密码不一样');

						return;
					}
					const sendData = {
						password,
						user_name,
						call_no,
					};
					if(this.editForm.id){
						sendData.id = this.editForm.id;
					}

					this.$axios
						.post('/admin/tuser/' + (this.editForm.id ? 'edit' : 'create'), 
                            sendData)
						.then((res) => {
							this.$message({
								showClose: true,
								message: '恭喜你，操作成功',
								type: 'success',
								onClose: () => {
									this.$emit('refreshDataList');
								},
							});
							this.dialogVisible = false;
							this.resetForm(formName);
						}).catch(e=> {
						});
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		checkIsDisabledDate(date){
			console.log(date);
			return true;
		},
		init(id, editType) {
			this.dialogVisible = true;
			this.isEditPs = editType === 'editPs';
			console.log(this.isEditPs, editType);
			if (id != null && id != '' && id > 0) {
				this.$axios.get('/admin/tuser/detail?id=' + id).then((res) => {
                    const {result = {}} = res;
                    const { ...rest} = result;
                    this.editForm = {
                        id: id,
                        repassword: result.password,
						...rest,
                    };
				}).catch(e => {});
			}
		},
	},
};
</script>

<style scoped>
.avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}
.avatar-uploader .el-upload:hover {
	border-color: #409eff;
}
.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	line-height: 178px;
	text-align: center;
}
.avatar {
	width: 178px;
	height: 178px;
	display: block;
}
</style>
